<template>
  <div id="register">
    <a-form :model="form" :style="{ width: '600px' }" @submit="handleSubmit">
      <a-form-item field="userName" label="账户">
        <a-input v-model="form.userName" placeholder="请输入用户名" />
      </a-form-item>

      <a-form-item field="userAccount" label="用户名">
        <a-input v-model="form.userAccount" placeholder="请输入用户名" />
      </a-form-item>

      <a-form-item field="userPassword" label="密码">
        <a-input-password
          v-model="form.userPassword"
          placeholder="请输入密码"
        />
      </a-form-item>

      <a-form-item field="checkUserPassword" label="确定密码">
        <a-input-password
          v-model="form.checkUserPassword"
          placeholder="再次输入密码"
        />
      </a-form-item>

      <a-form-item>
        <a-button html-type="submit">注册</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import { Message } from "@arco-design/web-vue";
import { useRouter } from "vue-router";

const router = useRouter();
import API from "@/servers/api/typings";
import * as logInController from "@/servers/api/logInController";

const form: API.UserRegisterDTO = reactive({});
const handleSubmit = async () => {
  //注册请求 todo
  const res = await logInController.register(form);
  if (res.data.code === 0) {
    Message.success({
      content: "注册成功",
      closable: true,
    });
    // 注册成功跳转到登录页面
    router.push({
      path: "/user/login",
      replace: true,
    });
  } else {
    Message.warning({
      content: res.data.msg,
    });
  }
};
</script>
<style></style>
